<template>
  <div class="edit-info">
    <van-nav-bar
      title="编辑资料"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    />
    <van-cell-group inset style="margin-top: 2rem">
      <!-- 输入任意文本 -->
      <van-cell title="姓名" :value="userInfo.name" />
      <van-cell title="工号" :value="userInfo.number" />
      <!-- 性别选择区域 -->
      <van-field
        v-model="userInfo.sexStr"
        is-link
        readonly
        name="picker"
        label="性别"
        placeholder="点击选择性别"
        @click="sexShowPicker = true"
      />
      <van-popup v-model:show="sexShowPicker" position="bottom" round>
        <van-picker
          :columns="sexColumns"
          @confirm="sexOnConfirm"
          @cancel="sexShowPicker = false"
        />
      </van-popup>
      <!-- 部门选择区域 -->
      <van-field
        v-model="userInfo.departmentName"
        is-link
        readonly
        name="picker"
        label="部门"
        placeholder="点击选择部门"
        @click="departmentShowPicker = true"
      />
      <van-popup v-model:show="departmentShowPicker" position="bottom" round>
        <van-picker
          :columns="departMentList"
          :columns-field-names="departmentColumns"
          @confirm="departmentOnConfirm"
          @cancel="departmentShowPicker = false"
        />
      </van-popup>
      <van-field v-model="userInfo.phone" type="tel" label="手机号" />
    </van-cell-group>
    <div class="update" @click="updateUserInfo">
      <van-button round block type="primary" native-type="submit">
        确认修改
      </van-button>
    </div>
  </div>
</template>

<script>
import { reactive, ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  getUserInfoByUserNum,
  updateUserById,
  departmentList,
} from '@/api/my/user.js'
import { Notify } from 'vant'
export default {
  name: 'EditInfo',
  setup() {
    const store = useStore()

    const userNumber = computed(() => store.getters.getUserNumber)

    onMounted(() => {
      getDepartment()
    })

    // 用户信息
    let userInfo = reactive({
      id: 0,
      name: '',
      number: '',
      sex: 0,
      sexStr: '',
      departmentNumber: '',
      departmentName: '',
      phone: '',
      type: 10,
    })

    // 获取用户信息
    async function getUserInfo() {
      const res = await getUserInfoByUserNum({ number: userNumber.value })
      if (res.data.code === 400) {
        Notify({ type: 'error', duration: 1000, message: res.data.message })
        return
      }
      console.log(res.data.data)
      const data = res.data.data

      userInfo.id = data.id
      userInfo.name = data.name
      userInfo.sex = data.sex
      userInfo.number = data.number
      userInfo.phone = data.phone
      userInfo.departmentNumber = data.departmentNumber
      userInfo.type = data.type

      userInfo.sexStr = sexColumns.find((t) => t.value === data.sex).text
      userInfo.departmentName = departMentList.value.find(
        (t) => t.departmentNumber === data.departmentNumber
      ).departmentName
    }

    /**
     * 性别选择区域
     */

    let sexShowPicker = ref(false)

    let sexColumns = [
      {
        text: '默认',
        value: 0,
      },
      {
        text: '男',
        value: 1,
      },
      {
        text: '女',
        value: 2,
      },
      {
        text: '保密',
        value: 3,
      },
    ]

    // 性别选择器确认按钮处理函数
    function sexOnConfirm(value) {
      console.log(value)
      userInfo.sex = value.value
      userInfo.sexStr = value.text
      sexShowPicker.value = false
    }

    /**
     * 部门选择区域
     */

    let departmentShowPicker = ref(false)

    let departMentList = ref([])

    let departmentColumns = {
      text: 'departmentName',
      value: 'departmentNumber',
    }

    // 部门选择器确认按钮处理函数
    function departmentOnConfirm(value) {
      userInfo.departmentName = value.departmentName
      userInfo.departmentNumber = value.departmentNumber
      departmentShowPicker.value = false
    }

    async function getDepartment() {
      const res = await departmentList()
      departMentList.value = res.data.data
      getUserInfo()
    }

    /**
     * 按钮区域
     */
    async function updateUserInfo() {
      const regExp = new RegExp("^1[35789]\\d{9}$");
      if (!regExp.test(userInfo.phone)) {
        Notify({ type: 'warning', duration: 1000, message: '手机号格式不正确！' })
        return  
      } 
      const res = await updateUserById({
        id: userInfo.id,
        name: userInfo.name,
        number: userInfo.number,
        departmentNumber: userInfo.departmentNumber,
        sex: userInfo.sex,
        phone: userInfo.phone,
        type: userInfo.type,
      })
      if (res.data.code === 400) {
        Notify({ type: 'error', duration: 1000, message: res.data.message })
        return
      }
      Notify({ type: 'success', duration: 1000, message: '修改成功！' })
    }

    // 点击返回按钮处理函数
    const onClickLeft = () => history.back()

    return {
      userInfo,
      sexShowPicker,
      departmentShowPicker,
      sexColumns,
      departmentColumns,
      departMentList,
      onClickLeft,
      sexOnConfirm,
      departmentOnConfirm,
      updateUserInfo,
    }
  },
}
</script>

<style lang="scss" scoped>
.edit-info {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);

  .update {
    width: 100%;
    height: 10rem;
    margin-top: 2rem;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    // .btn {
    //   width: 20rem;
    //   height: 5rem;
    //   border-radius: 1rem;
    //   text-align: center;
    //   line-height: 5rem;
    //   font-size: 1.5rem;
    //   font-weight: 500;
    //   background-color: #5cacee;
    // }
  }
}
</style>